<template>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
            <el-col :lg="24">
                <el-form-item label="任务编码" prop="id" v-show="form.id">
                    <el-input v-model="form.id" placeholder="请输入任务编码" clearable />
                </el-form-item>
            </el-col>
            <el-col :lg="24">
                <el-form-item label="任务名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入任务名称" clearable />
                </el-form-item>
            </el-col>

            <el-col :lg="24">
                <el-form-item label="任务类型" prop="extend.type">
                    <el-radio-group v-model="form.extend.type">
                        <el-radio v-for="item in job_type" :key="item.value" :value="item.value">
                            {{ item.label }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
            <template v-if="form.extend.type == 0">
                <el-col :lg="24">
                    <el-form-item label="远程地址" prop="extend.remote">
                        <el-input v-model="form.extend.remote" placeholder="请输入远程地址" clearable>
                            <template #prepend>
                                <el-select v-model="form.extend.method" style="width: 80px">
                                    <el-option label="GET" value="Get" />
                                    <el-option label="POST" value="POST" />
                                    <el-option label="PUT" value="PUT" />
                                    <el-option label="DELETE" value="DELETE" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :lg="24">
                    <el-form-item prop="params">
                        <template #label>
                            <span>
                                <el-tooltip content="远程请求将以querystring的方式作为参数追加到地址后面" placement="top">
                                    <el-icon><question-filled /></el-icon>
                                </el-tooltip>
                                请求参数
                            </span>
                        </template>
                        <el-scrollbar max-height="150px" class="params-wrapper">
                            <template v-if="form.extend.params && form.extend.params.length > 0">
                                <div class="params-item" v-for="(parm, index) in form.extend.params" :key="index"
                                    ref="paramRefs">
                                    <div class="key">
                                        <div class="label"><el-text type="primary">参数名</el-text></div>
                                        <div class="input-value"><el-input v-model="parm['key']" placeholder="请输入参数名"
                                                clearable /></div>
                                    </div>
                                    <div class="value">
                                        <div><el-text type="primary">值</el-text></div>
                                        <div class="input-value"><el-input v-model="parm['value']" placeholder="请输入参数值"
                                                clearable /></div>
                                    </div>
                                    <div class="action">
                                        <el-button type="danger" link icon="delete" @click="handleReduceParams(index)"
                                            v-if="index != 0"></el-button>
                                        <el-button type="primary" link icon="CirclePlusFilled"
                                            @click="handleAppendParams"
                                            v-if="form.extend.params.length - 1 == index"></el-button>
                                    </div>
                                </div>
                            </template>
                        </el-scrollbar>
                    </el-form-item>
                </el-col>
            </template>

            <template v-else-if="form.extend.type == 1">
                <el-col :lg="24">
                    <el-form-item label="执行程序" prop="extend.jobType">
                        <el-select clearable v-model="form.extend.jobType">
                            <el-option v-for="(item, index) in availJobTypes" :key="index" :label="item.name"
                                :value="item.jobType" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </template>
            <el-col :lg="24">
                <el-form-item label="任务描述" prop="description">
                    <el-input v-model="form.description" type="textarea" :rows="6" resize="none" placeholder="请输入任务描述"
                        clearable />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>



<script setup>
import { job_type } from '../status';
import { jobTypeAvail } from "@/api/schedule/scheduledjob.js";

//组件元数据
defineOptions({ title: '基本信息' })
const form = defineModel({
    type: Object,
    default: {
        extend: {
            type: 0,
            jobType: undefined,
            method: 'GET',
            params: [{ key: undefined, value: undefined }],  //默认加载加载一个
        }
    }
})

const { proxy } = getCurrentInstance()
const formRef = ref();
const paramRefs = ref([]);
const availJobTypes = ref([]);

const rules = ref({
    name: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
    'extend.remote': [
        { required: true, message: '远程地址不能为空', trigger: 'blur' },
        { pattern: /^https?:\/\/.+/, message: '请输入有效的远程地址', trigger: 'blur' }
    ],
    "extend.jobType": [{ required: true, message: "请选择可执行程序", trigger: "change" }],
})

//添加参数
const handleAppendParams = () => {
    form.value.extend.params.push({ key: '', value: '' })
    let index = form.value.extend.params.length - 1;
    nextTick(() => {
        paramRefs.value[index].scrollIntoView({
            behavior: "smooth",
            block: "end",
        });
    })
}


//移除参数
const handleReduceParams = (index) => {
    form.value.extend.params.splice(index, 1);
}

//获取可用作业类型选项
const handleJobTypeAvail = () => {
    jobTypeAvail().then(res => {
        availJobTypes.value = res;
    })
}


//校验
const validate = () => {
    const validateForm = formRef.value?.validate;
    if (!validateForm) {
        return Promise.reject(new Error('validate 方法不存在'));
    }
    return validateForm();
}

defineExpose({ validate });

onMounted(() => {
    handleJobTypeAvail();
})

</script>



<style lang="scss" scoped>
.params-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;

    .params-item {
        padding-bottom: 15px;
        display: flex;
        gap: 10px;
        flex: 1;

        .label {
            flex-basis: 40px;
        }

        >div {
            display: flex;
            gap: 10px;
            flex: 1 auto;
        }

        .input-value {
            width: 160px;
        }

        .value {
            flex-grow: 1;
        }

        .action {
            flex: 1 1 60px;
            flex-basis: 60px;
            gap: 0;
            margin-left: auto;
        }
    }
}
</style>